<script setup>
  import {ref} from 'vue';
  const isHide = ref(true)

</script>


<template>
  <h3>可折叠面板</h3>
  <div class="panel">
    <div class="title">
      <!-- 标题 -->
      <h4>自由与爱情</h4>
      <!-- 方法1 -->
      <!-- <span @click="isHide = true" v-show="!isHide" class="btn">收起</span>
      <span @click="isHide = false" v-show="isHide" class="btn">展开</span> -->
      
      <!-- 方法2 -->
      <span @click="isHide = !isHide" class="btn">{{ isHide ? '展开' : '收起' }}</span>
    </div>
    <div class="container" v-show="!isHide">
      <p>生命诚可贵，</p>
      <p>爱情价更高。</p>
      <p>若为自由故，</p>
      <p>两者皆可抛。</p>
    </div>
  </div>
</template>

<style lang="scss">
body {
  background-color: #ccc;
}
#app {
  width: 400px;
  margin: 20px auto;
  padding: 1em 2em 2em;
  border: 4px solid green;
  border-radius: 1em;
  background-color: #fff;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, .5);
}

.panel {
  
  .title {
    border: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1em;
    border: 1px solid #ccc
    h4 {
      line-height: 2;
      margin: 0;
    }

  }
  .container {
    border: 1px solid #ccc;
    padding: 0 1em;
    border-top-color: transparent;
  }
  .btn {
    cursor: pointer;
  }
  
}
</style>